<template>
    <div>
        <div>
            <van-nav-bar title="23201013507-胡雄涛" left-text="返回" left-arrow @click-left="onClickLeft" />
        </div>
        <div class="food">
            <div class="food_intro">
                <van-card v-for="value in data.food" :key="value.item_id"
                 :desc="value.intro" :title="value.foodname" :thumb="getImg(value.pic)">
                    <template #price>
                        <div class="van-card__price">
                            <div>
                                <span class="van-card__price-currency">¥</span>
                                <span class="van-card__price-integer">{{value.price}}</span>
                                <span class="van-card__price-decimal">.00</span>
                            </div>
                        </div>
                    </template>
                </van-card>
            </div>
        </div>
        <div class="time">
            <div>
                <p>送达时间:{{ time.currentTime.join(':') }}</p>
            </div>
            <div class="addTime">
                <van-button type="danger" @click="showPopup">选择时间</van-button>
            </div>
        </div>
        <div>
            <van-submit-bar :price="route.query.sum * 100" button-text="购买" @submit="onSubmit" />
        </div>

        <!-- 弹出层 -->
        <van-popup v-model:show="time.show" position="bottom" :style="{ height: '50%' }">
            <div>
                <van-time-picker v-model="time.currentTime" title="选择时间" :min-hour="10" :max-hour="20"
                    @confirm="putt()" />
            </div>
        </van-popup>
    </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import { useCounterStore } from '@/stores/counter';
import { getItemsApi, insertOrder2Api } from '@/api';
import { showSuccessToast, showFailToast } from 'vant';
const router = useRouter();
const route = useRoute();
const store = useCounterStore();
const getImg = e => `http://172.17.18.240:8080/nfood${e}`;
const data = reactive({
    num: 1,
    food: []
});
const time = reactive({
    show: false,
    currentTime: ['12', '00']
});
const showPopup = () => {
    time.show = true;
};
const putt = () => {
    time.show = false;
};
const getFoodDetail = async e => {
    const res = await getItemsApi(e);
    data.food.push(...res);
};
const insertOrder = async e => {
    const res = await insertOrder2Api(e);
    if (res.success === '0') {
        showFailToast('购买失败！');
    }
    else {
        showSuccessToast('购买成功！');
    }
};
const onSubmit = () => {
    insertOrder({
        userId: store.userId,
        items: route.query.itemId,
        sum: route.query.sum,
        suggesttime: time.currentTime.join(':')
    });
};
onMounted(() => {
    getFoodDetail(route.query.itemId);
});
const onClickLeft = () => {
    router.back()
};
</script>

<style scoped>
.van-card__price{
    color: #f00;
}

.van-card__price-integer{
    font-size: 20px;
}
:deep(.van-card__thumb){
    width: 120px;
    height: 120px;
}
:deep(.van-card__title){
    font-size: 20px;
    line-height: 20px;
}
.van-button--normal{
    font-size: 20px;
}
.time{
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.time p{
    font-size: 20px;
    margin-left: 10px;;
}
.van-card{
    background-color: #fff;
}
</style>